<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			/*2.执行动画*/
			animation-name: move;/*动画名称*/
			animation-duration: 3s;/*动画持续时间*/
			animation-delay: 3s;
			/*动画延迟时间*/
			animation-iteration-count: 1;/*动画的执行次数*/
			/*animation-direction: alternate-reverse;*//*设置动画是否交替起点*/
			animation-fill-mode: backwards;/*设定动画执行前或执行后停留的位置*/
		}
		/*1.定义动画轨迹*/
		@keyframes move{
			0%{
				margin-left: 0px;
				background-color: blue;
			}
			50%{
				background-color: orange;
			}
			100%{
				margin-left: 500px;
				background-color: pink;
			}
		}
		/*@keyframes move{
			from{
				margin-left: 0px;
				background-color: red
			}
			to{
				margin-left: 300px;
				background-color: blue
			}
		}*/
	</style>
</head>
<body>
	<div></div>
</body>
</html>






